<template>
  <div>
    <header class="wrap">
    <div class="logo-box">
        <h1 class="left">
            <a href="" ><img src="@/assets/images/logo_jingdong.png" alt="LOGO"/></a>
        </h1>
        <span class="left logo-r">欢迎登录</span>
    </div>
</header>

<article class="content">
    <div class="wrap">
        <div class="login-box">
            <div class="login-form">
                <h2>京东会员<a href="/regist">立即注册</a></h2>
                <form action="" method="post" id="loginForm">
                    <div class="item">
                        <label class="nick left"></label>
                        <input type="text" placeholder="用户名" v-model="userForm.username"/>
                    </div>
                    <div class="item">
                        <label class="psw left"></label>
                        <input type="password" placeholder="密码" v-model="userForm.password"/>
                    </div>
                    <!-- <div class="item2">
                        <input type="checkbox" name="auto" id="auto"/>
                        <label for="auto">自动登录</label>
                        <a href="">忘记密码?</a>
                    </div> -->
                    <a href="javaScript:;" class="login-btn" @click="login()">登 录</a>
                </form>
            </div>
        </div>
    </div>
</article>
<footer class="wrap footer">
    <div class="link">
        <a href="">关于我们</a>|
        <a href="">联系我们</a>|
        <a href="">人才招聘</a>|
        <a href="">商家入驻</a>|
        <a href="">广告服务</a>|
        <a href="">手机京东</a>|
        <a href="">友情链接</a>|
        <a href="">销售联盟</a>|
        <a href="">京东社区</a>|
        <a href="">京东公益</a>|
        <a href="">English Site</a>
    </div>
    <div class="copy">Copyright©2004-2017 京东JD.com 版权所有</div>
</footer>
  </div>
</template>

<script>
import {login} from '@/api/user'

export default {
  data () {
    return {

		userForm:{
			username: null,
			password: null,
		}
    }
  },

  components: {},

  methods: {
	login(){
		//
		if(!this.userForm.username){
			this.$message("用户名不能为空");
			return;
		}

		if(!this.userForm.password){
			this.$message("密码不能为空");
			return;
		}
		login(this.userForm).then(resp=>{
			if(resp.code == 2000){
				this.$message("登录成功!")

				//保存后台给的token 和 user
				localStorage.setItem("shop_token",resp.data.token);
				localStorage.setItem("shop_user",  JSON.stringify(resp.data.user) );
				this.$router.push("/");
			}else{
				this.$message(resp.message)
			}
			
		})

	},
  }
}
</script>

<style scoped>
*{padding:0;margin:0;}
a{text-decoration:none;color:#666;}
a:hover{text-decoration:underline;color:#b61d1d;}
body,html{font:12px/1.5 "微软雅黑",Arial;color:#666;}
.wrap{width:990px;margin:0 auto;}
.left{float:left;}
.right{float:right;}

.logo-box{
	height:60px;
	padding-top:10px;
}
.logo-r{
	font-size:24px;
	padding-left:20px;
	margin-top:10px;
}

.content{
	background:#e93854;
	margin-top:15px;
}
.login-box{
	height:475px;
	background:url(@/assets/images/banner.png) no-repeat left top;
}
.login-form{
	float:right;
	margin-top:40px;
	width:306px;
	padding:20px;
	background:#fff;
}
.login-form h2{
	font-weight:normal;
	font-size:20px;
	height:27px;
	margin-bottom:25px;
}
.login-form h2 a{
	font-size:14px;
	color:#b61d1d;
	padding-left:21px;
	line-height:29px;
	float:right;
	background:url(@/assets/images/icon5.jpg) 0 center no-repeat ;
}
.login-form .item{
	height:38px;
	margin-bottom:20px;
	border:1px #bdbdbd solid;
}
.item input{
	float:left;
	border:0 none;
	padding:10px 0 10px 10px;
	font-size:14px;
	line-height:18px;
	width:255px;
	color:#999;
}
.item label{
	border-right:1px #bdbdbd solid;
	width:38px;
	height:38px;
}
.item .nick{
	background:url(@/assets/images/icon1.jpg) no-repeat;
}

.item .psw{
	background:url(@/assets/images/icon2.jpg) no-repeat;
}
.item2{
	font-size:0;
	margin-bottom:15px;
}
.item2 label{
	font-size:12px;
	vertical-align:middle;
}
.item2 input{
	vertical-align:middle;
	margin-right:3px;
}
.item2 a{
	float:right;
	font-size:12px;
}
.login-btn{
	display:block;
	height:35px;
	line-height:35px;
	text-align:center;
	color:#fff;
	background:#e4393c;
	font-size:18px;
}
.login-btn:hover{
	color:#fff;
	text-decoration:none;
}
.footer{
	text-align:center;
	margin-top:20px;
	padding-bottom:30px;
}
.link a{
	margin:0 10px;
}
.copy{
	margin-top:8px;
}
</style>